<template>
  <div>
    <a-collapse :default-active-key="[1, 2, 3, 4, 5]" :bordered="false">
      <a-collapse-item header="内容标题" :key="5">
        <div class="items">
          <p class="titles">标题</p>
          <a-input v-model="currentTemp.title" />
        </div>
      </a-collapse-item>
      <a-collapse-item header="富文本内容" :key="1">
        <Toolbar :editor="editorRef" :default-config="toolbarConfig" />
        <Editor
          v-model="currentTemp.context"
          :default-config="editorConfig"
          class="editor_custom"
          style="height: 332px; overflow-y: hidden"
          @on-created="handleCreated"
          @on-change="handleChange"
          @on-destroyed="handleDestroyed"
          @on-focus="handleFocus"
          @on-blur="handleBlur"
          @custom-alert="customAlert"
          @custom-paste="customPaste"
        />
      </a-collapse-item>

      <a-collapse-item header="间距(px)" :key="2">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="3">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css'
  // import { usUploadStore } from '@/store/modules/upload'
  import { onBeforeUnmount, computed, ref, shallowRef, onMounted, watch } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  // import * as http from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { upLoadFiles } from '@/api/common'
  const emit = defineEmits(['change', 'update:modelValue'])
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
    modelValue: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  })

  const currentTemp = computed(() => props.config)
  console.log(currentTemp.value)
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )

  // 编辑器实例，必须用 shallowRef，重要！
  const editorRef = shallowRef()

  // const menu = editor.getAllMenuKeys()
  // const bar = toolbar.getConfig().toolbarKeys
  // 内容 HTML
  const valueHtml = ref(props.modelValue)
  watch(
    () => valueHtml.value,
    (newValue) => {
      props.emit('update:modelValue', newValue)
    }
  )

  watch(
    () => props.modelValue,
    (newValue) => {
      valueHtml.value = newValue
    }
  )
  // 模拟 ajax 异步获取内容
  onMounted(() => {
    AuthorizationHeader()
    // setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 1500)
  })
  const headerObj = ref({})
  const AuthorizationHeader = () => {
    // if (tokenStore.token != '') {
    //     if (tokenStore.token != '0') {
    //         headerObj.value.Authorization =  tokenStore.token
    //     } else {
    //         headerObj.value.Authorization = userOutsideStore.tokenHead + userOutsideStore.token
    //     }
    // }
  }
  const toolbarConfig = {
    excludeKeys: ['group-video', 'insertImage', 'insertLink', 'emotion'], // 此处不需要的工具栏选项
  }

  const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {},
    hoverbarKeys: {
      image: {
        // 清空 image 元素的 hoverbar
        menuKeys: [],
      },
    },
  }

  // 上传图片
  editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的接口地址
    server: upLoadFiles,
    // form-data fieldName ，默认值 'wangeditor-uploaded-image'
    fieldName: 'file',

    // 单个文件的最大体积限制，默认为 2M
    maxFileSize: 5 * 1024 * 1024, // 5M

    // 最多可上传几个文件，默认为 100
    maxNumberOfFiles: 20,

    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['image/png,image/jpeg,image/jpg'],

    // 小于该值就插入 base64 格式（而不上传），默认为 0
    base64LimitSize: 0, // 5kb
    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //     token: 'xxx',
    //     otherKey: 'yyy'
    // },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 自定义增加 http  header
    headers: headerObj,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 10 秒
    timeout: 5 * 1000, // 5 秒
    // 上传之前触发
    onBeforeUpload(file) {
      // file 选中的文件，格式如 { key: file }
      let fileObj = Object.values(file)[0].data
      const isJPG =
        fileObj.type == 'image/jpg' || fileObj.type == 'image/jpeg' || fileObj.type == 'image/png'
      if (!isJPG) {
        Message.error('图片只能是 JPG、GIF、PNG 格式!')
      }
      // 判断图片宽高
      // 定义 filereader对象

      // 判断图片大小
      let isLt = fileObj.size / 1024 / 1024 < 5 // 判断是否小于5M
      if (!isLt) {
        Message.error('图片大小不能超过5M! 请重新上传')
      }
      if (!isJPG) {
        return false
      } else if (!isLt) {
        return false
      } else {
        return file
      }
      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file, res) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 自定义插入图片
    customInsert(res, insertFn) {
      console.log(window.location.host)
      // res 即服务端的返回结果
      // 从 res 中找到 url alt href ，然后插图图片
      insertFn('http://' + window.location.host + res.data.path, '', '')
    },
    // 单个文件上传失败
    // onFailed(file, res) {
    //     console.log(`${file.name} 上传失败`, res)
    // },
    // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {
      console.log(`${file.name} 上传出错`, err, res)
    },
  }
  // 上传视频
  editorConfig.MENU_CONF['uploadVideo'] = {
    // 上传视频接口地址
    // server: usUploadStore().uploadVideo,
    // form-data fieldName ，默认值 'wangeditor-uploaded-video'
    fieldName: 'file',

    // 单个文件的最大体积限制，默认为 10M
    maxFileSize: 5 * 1024 * 1024, // 5M

    // 最多可上传几个文件，默认为 5
    maxNumberOfFiles: 3,

    // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
    allowedFileTypes: ['video/mp4'],

    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
    // meta: {
    //     token: 'xxx',
    //     otherKey: 'yyy'
    // },

    // 将 meta 拼接到 url 参数中，默认 false
    metaWithUrl: false,

    // 自定义增加 http  header
    headers: headerObj,

    // 跨域是否传递 cookie ，默认为 false
    withCredentials: true,

    // 超时时间，默认为 30 秒
    timeout: 15 * 1000, // 15 秒

    // 视频不支持 base64 格式插入
    // 自定义插入视频
    customInsert(res, insertFn) {
      // res 即服务端的返回结果

      // 从 res 中找到 url ，然后插入视频
      insertFn(res.data.url)
    },
    // 上传之前触发
    onBeforeUpload(file) {
      // file 选中的文件，格式如 { key: file }
      return file

      // 可以 return
      // 1. return file 或者 new 一个 file ，接下来将上传
      // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {
      // progress 是 0-100 的数字
      console.log('progress', progress)
    },
    // 单个文件上传成功之后
    onSuccess(file, res) {
      console.log(`${file.name} 上传成功`, res)
    },
    // 单个文件上传失败
    onFailed(file, res) {
      console.log(`${file.name} 上传失败`, res)
    },
    // 上传错误，或者触发 timeout 超时
    onError(file, err, res) {
      console.log(`${file.name} 上传出错`, err, res)
    },
  }
  // 组件销毁时，也及时销毁编辑器，重要！
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  // 编辑器回调函数
  const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    if (props.disabled) {
      editor.disable()
    } else {
      editor.enable()
    }
  }
  const handleChange = (editor) => {
    return editor
  }
  const handleDestroyed = (editor) => {
    // console.log('destroyed', editor)
    return editor
  }
  const handleFocus = (editor) => {
    //console.log('focus', editor)
    return editor
  }
  const handleBlur = (editor) => {
    //console.log('blur', editor)
    return editor
  }
  const customAlert = (info, type) => {
    alert(`【自定义提示】${type} - ${info}`)
  }
  const customPaste = (editor, event, callback) => {
    console.log('ClipboardEvent 粘贴事件对象', event)

    // 自定义插入内容
    // editor.insertText('xxx')

    // 返回值（注意，vue 事件的返回值，不能用 return）
    // callback(false) // 返回 false ，阻止默认粘贴行为
    callback(true) // 返回 true ，继续默认的粘贴行为
  }
</script>

<style scoped lang="less">
  :deep(.w-e-text-container) {
    background-color: #f5f5f5;
  }
  :deep(.w-e-scroll) {
    overflow-y: hidden !important;
  }
  :deep(.w-e-text-container p) {
    margin: 8px 0px;
  }
  :deep(.w-e-text-container [data-slate-editor]) {
    overflow-y: auto !important;
    height: 100% !important;
  }
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }
  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }
  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }
  :deep(.arco-collapse-item-header) {
    border: none;
  }
  :deep(.arco-collapse-item) {
    border: none;
  }
  :deep(.arco-slider-track::before) {
    height: 4px;
  }
  :deep(.arco-slider-bar) {
    height: 4px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }
  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }
  .items {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    .titles {
      min-width: 28px;
      margin-right: 20px;
      display: inline-block;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 0px;
      z-index: 1000000;
    }
  }
</style>
